<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.page{
				margin:0px;
				padding:0px;
				height: 34px;
				list-style:none;	
			}	
			
			.page li{				
				float:left;
				width: 50px;
				height: 34px;				
				padding:0px 5px;
				text-align:center;				
				margin-right: 2px;
				line-height: 34px;				
				border:solid 1px cornflowerblue;
			}	
			
			.page li:hover{
				background: orange;
			}	
		</style>
		
		<script type="text/javascript">
			/**
			 * 通过getData()函数查询数据
			 * @param {Object} idx
			 */
			function getData(idx){
				alert(idx);
				location.href="user?pageIndex=" + idx;
			}
		</script>
	</head>
	<body>
		<ul class="page">
			<li onclick="getData(1)">首页</li>
			<li>上一页</li>
			<li onclick="getData(1)">1</li>
			<li onclick="getData(2)">2</li>
			<li onclick="getData(3)">3</li>
			<li onclick="getData(4)">4</li>
			<li>下一页</li>
			<li onclick="getData(4)">末页</li>
		</ul>
	</body>
</html>
